<template>
  <div>
    <Header></Header>
<!--    <Search></Search>-->
<!--    <GoodsListNav></GoodsListNav>-->
    <div class="container">
      <div class="bread-crumb">
        <Breadcrumb>
          <BreadcrumbItem to="/Index">
            <Icon type="ios-home-outline"></Icon> 首页
          </BreadcrumbItem>
          <BreadcrumbItem to="/goodsList?sreachData=">
            <Icon type="bag"></Icon> {{searchItem}}
          </BreadcrumbItem>
        </Breadcrumb>
      </div>



      <div>
        <Row class="item-class-group" v-for="(items, index) in tagsInfo" :key="index">
          <i-col class="item-class-name" span="3">{{ items.tagName }} : </i-col>
          <i-col class="item-class-select" span="21">
            <span v-for="(item, subIndex) in items.tags" :key="subIndex" @click="test(items,subIndex)">{{ item }}</span>
          </i-col>
        </Row>
      </div>

      <div class="goods-list-box" >
        <div class="goods-list">
          <div class="goods-show-info" v-for="(item, index) in tableData" :key="index" >
            <div class="goods-show-img" >
              <router-link to="/goodsDetail">
                <img :src="item.images[0].image" style="height : 180px ;width: 180px">
              </router-link>
            </div>
            <div class="goods-show-price">
                  <span>
                    <Icon type="social-yen text-danger"></Icon>
                    <span class=" text-danger">{{item.price}}</span>
                  </span>
            </div>
            <div class="goods-show-detail">
              <span>{{item.name}}</span>
            </div>
            <div class="goods-show-seller">
              <span>{{item.brand}}</span>
            </div>
          </div>
        </div>
      </div>
      <Page
        :total="count"
        @on-change="change"
        :current="page">
      </Page>
    </div>
  </div>
</template>

<script>
import axios from "_axios@0.24.0@axios";
import {getGoods,getbrand} from '@/util/list';
import Search from './Search';
import Header from '@/components/header/Header';
export default {
  name:'GoodsList',
  data () {
    return {
      searchItem: '',
      columns:
        [
          {
            title: '品牌',
            key: 'brand'
          },
          {
            title: '商品名称',
            key: 'name'
          },
          {
            title: '价格',
            key: 'price'
          }
        ],
        count : 1,
        page :1,
        tableData: [],
        tagsInfo: [
          {
            tagName: '分区',
            tags: [ 'Lenovo', 'ThinkPad', '平板电脑', "全部"]
          },
          {
            tagName: 'Lenovo',
            tags: [ '拯救者Y7000', '拯救者Y7000P', '拯救者R7000', "小新Pro 16", "小新Air 15", "小新Air 14"]
          },
          {
            tagName: 'ThinkPad',
            tags: [ 'X1系列', 'X系列', 'T系列', '口红电源', '耳机', 'U盘' ]
          },
          {
            tagName: '平板电脑',
            tags: [ '小新Pad', '小新Pad plus', '小新Pad Pro银色', 'YOGA Pad Pro']
          }
        ],
        tagtemp:0
      }
    },
  components: {
    Header, Search
  },
    methods:{
      change(page)
      {
        var that = this;
        this.page = page;
        getGoods(that.page).then(response => {
            that.count = response.data.count;
            that.tableData = response.data.results;
            console.log(this.tableData[0].images[0].image);
        })
      },
      test(tag,index,page){
        var that = this;
        // that.searchItem='';
        that.tagtemp = tag.tags[index];
        if(that.tagtemp == "全部"){
          getGoods(that.page).then(response => {
            that.count = response.data.count;
            that.tableData = response.data.results;
            console.log(this.tableData[0].images[0].image);
          })
        }
        else{
          getbrand(that.tagtemp).then(response => {
            that.count = response.data.count;
            that.tableData = response.data.results[0].goods;

            console.log(this.tableData[0].images[0].image);
          })
        }
      }
    },

    mounted() {
        var that = this;
        that.searchItem=that.$route.query.searchData;
        console.log(this.$route.query.searchData);
        if(that.searchItem !== '')
        {
          getbrand(this.searchItem).then(response => {
            that.count = response.data.count;
            that.tableData = response.data.results[0].goods;
            console.log(this.tableData[0].images[0].image);
          })
        }
        else {
          getGoods().then(response => {
            that.count = response.data.count;
            that.tableData = response.data.results;
            console.log(this.tableData[0].images[0].image);
          })
        }
      }
  }

</script>

<style scoped>
.container {
  margin: 15px auto;
  width: 93%;
  min-width: 1000px;
}
.text-danger {
  color: #A94442;
}
.seckill-price{
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
.goods-box {
  display: flex;
}

.item-class-group {
  margin-top: 1px;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.item-class-group:first-child {
  border-top: 1px solid #ccc;
}
.item-class-name {
  padding-left: 15px;
  line-height: 44px;
  color: #666;
  font-weight: bold;
  background-color: #f3f3f3;
}
.item-class-name:first-child {
  line-height: 43px;
}
.item-class-select span {
  margin-left: 15px;
  width: 160px;
  color: #005aa0;
  line-height: 45px;
  cursor: pointer;
}
/* ---------------商品栏开始------------------- */
.goods-list-box {
  margin-left: 15px;
  width: calc(100% - 215px);
}
.goods-list-tool{
  width: 100%;
  height: 38px;
  border: 1px solid #ccc;
  background-color: #F1F1F1;
}
.goods-list-tool ul{
  padding-left: 15px;
  list-style: none;
}
.goods-list-tool li{
  cursor: pointer;
  float: left;
}
.goods-list-tool span{
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 36px;
  background-color: #fff;
}
.goods-list-tool span:hover{
  border: 1px solid #E4393C;
}
.goods-list-tool i:hover{
  color: #E4393C;
}
.goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: #E4393C !important;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-show-info{
  width: 240px;
  padding: 10px;
  margin: 15px 0px;
  border: 1px solid #fff;
  cursor: pointer;
}
.goods-show-info:hover{
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}
.goods-show-price{
  margin-top: 6px;
}
.goods-show-detail{
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-num{
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}
.goods-show-num span{
  color: #005AA0;
  font-weight: bold;
}
.goods-show-seller{
  font-size: 12px;
  color:#E4393C;
}
.goods-page {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* ---------------商品栏结束------------------- */
</style>
